import React from 'react';

export default
  class ProductSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchType: 'productId', // productId, productName
      searchKeyword: '',
    };
  }
  /**
   * 数据变化的时候
   * @param {*} e 
   */
  onValueChange(e) {
    let name = e.target.name;
    let value = e.target.value.trim();
    this.setState({
      [name]: value
    });
  }
  /**
   * 按钮点击的时候
   */
  onSearch() {
    this.props.onSearch(this.state.searchType, this.state.searchKeyword);
  }

  //输入关键字后按回车
  onSearchKeywordKeyUp(e) {
    if(e.keyCode===13)
      this.onSearch();
  }

  render() {
    return (
      <div className="row search-wrapper">
        <div className="col-md-12">
          <div className="form-inline">
            <div className="form-group">
              <select className="form-control"
                name="searchType"
                onChange={e => this.onValueChange(e)}>
                <option value="productId">按商品ID查询</option>
                <option value="productName">按商品名称查询</option>
              </select>
            </div>
            <div className="form-group">
              <input type="text" className="form-control"
                name="searchKeyword"
                onChange={e => this.onValueChange(e)}
                onKeyUp={e => this.onSearchKeywordKeyUp(e)}
                placeholder="关键词" />
            </div>
            <button className="btn btn-primary" onClick={() => this.onSearch()}>搜索</button>
          </div>
        </div>
      </div>
    );
  }
}